<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<base th:href="@{/}" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/theme.css">
<style>
#footer {
	padding: 15px 0;
	background: #fff;
	border-top: 1px solid #ddd;
	text-align: center;
}

#topcontrol {
	color: #fff;
	z-index: 99;
	width: 30px;
	height: 30px;
	font-size: 20px;
	background: #222;
	position: relative;
	right: 14px !important;
	bottom: 11px !important;
	border-radius: 3px !important;
}

#topcontrol:after {
	/*top: -2px;*/
	left: 8.5px;
	content: "\f106";
	position: absolute;
	text-align: center;
	font-family: FontAwesome;
}

#topcontrol:hover {
	color: #fff;
	background: #18ba9b;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.label-type, .label-status, .label-order {
	background-color: #fff;
	color: #f60;
	padding: 5px;
	border: 1px #f60 solid;
}

#typeList
  
:not
 
(
:first-child
 
)
{
margin-top
:
 
20
px
;


}
.label-txt {
	margin: 10px 10px;
	border: 1px solid #ddd;
	padding: 4px;
	font-size: 14px;
}

.panel {
	border-radius: 0;
}

.progress-bar-default {
	background-color: #ddd;
}
</style>
</head>
<body>
	<div class="navbar-wrapper">
		<div class="container">
			<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand" href="index.html" style="font-size: 32px;">尚筹网-创意产品众筹平台</a>
					</div>
					<div id="navbar" class="navbar-collapse collapse" style="float: right;">
						<ul class="nav navbar-nav">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									<i class="glyphicon glyphicon-user"></i>
									[[${session.loginMember.username}]]
									<span class="caret"></span>
								</a>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="member.html">
											<i class="glyphicon glyphicon-scale"></i>
											会员中心
										</a>
									</li>
									<li>
										<a href="#">
											<i class="glyphicon glyphicon-comment"></i>
											消息
										</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="http://www.crowd.com/auth/member/logout">
											<i class="glyphicon glyphicon-off"></i>
											退出系统
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>

	<div class="container theme-showcase" role="main">


		<div class="container">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<div class="panel panel-default">
						<div class="panel-heading" style="text-align: center;">
							<div class="container-fluid">
								<div class="row clearfix">
									<div class="col-md-3 column">
										<div class="progress" style="height: 50px; border-radius: 0; position: absolute; width: 75%; right: 49px;">
											<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%; height: 50px;">
												<div style="font-size: 16px; margin-top: 15px;">1. 确认回报内容</div>
											</div>
										</div>
										<div style="right: 0; border: 10px solid #ddd; border-left-color: #88b7d5; border-width: 25px; position: absolute; border-left-color: rgba(92, 184, 92, 1); border-top-color: rgba(92, 184, 92, 0); border-bottom-color: rgba(92, 184, 92, 0); border-right-color: rgba(92, 184, 92, 0);"></div>
									</div>
									<div class="col-md-3 column">
										<div class="progress" style="height: 50px; border-radius: 0; position: absolute; width: 75%; right: 49px;">
											<div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%; height: 50px;">
												<div style="font-size: 16px; margin-top: 15px;">2. 确认订单</div>
											</div>
										</div>
										<div style="right: 0; border: 10px solid #ddd; border-left-color: #88b7d5; border-width: 25px; position: absolute; border-left-color: rgba(221, 221, 221, 1); border-top-color: rgba(221, 221, 221, 0); border-bottom-color: rgba(221, 221, 221, 0); border-right-color: rgba(221, 221, 221, 0);"></div>
									</div>
									<div class="col-md-3 column">
										<div class="progress" style="height: 50px; border-radius: 0; position: absolute; width: 75%; right: 49px;">
											<div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%; height: 50px;">
												<div style="font-size: 16px; margin-top: 15px;">3. 付款</div>
											</div>
										</div>
										<div style="right: 0; border: 10px solid #ddd; border-left-color: #88b7d5; border-width: 25px; position: absolute; border-left-color: rgba(221, 221, 221, 1); border-top-color: rgba(221, 221, 221, 0); border-bottom-color: rgba(221, 221, 221, 0); border-right-color: rgba(221, 221, 221, 0);"></div>
									</div>
									<div class="col-md-3 column">
										<div class="progress" style="height: 50px; border-radius: 0;">
											<div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%; height: 50px;">
												<div style="font-size: 16px; margin-top: 15px;">4. 完成</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="panel-body">
							<div class="container-fluid">
								<div class="row clearfix">
									<div class="col-md-12 column">
										<blockquote style="border-left: 5px solid #f60; color: #f60; padding: 0 0 0 20px;">
											<b> 请确认您所选择的回报项信息和购买数量 </b>
										</blockquote>
									</div>
									<div class="col-md-12 column">
										<table class="table table-bordered" style="text-align: center;">
											<thead>
												<tr style="background-color: #ddd;">
													<td>项目名称</td>
													<td>发起人</td>
													<td width="300">回报内容</td>
													<td width="80">回报数量</td>
													<td>支持单价</td>
													<td>配送费用</td>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td th:text="${session.orderProjectVO.projectName}">活性富氢净水直饮机</td>
													<td th:text="${session.orderProjectVO.launchName}">深圳市博实永道电子商务有限公司</td>
													<td th:text="${session.orderProjectVO.returnContent}">每满1750人抽取一台活性富氢净水直饮机，至少抽取一台。抽取名额（小数点后一位四舍五入）=参与人数÷1750人，由苏宁官方抽取。</td>
													<td>
														<input id="returnCountInput" type="text" class="form-control" style="width: 60px;" th:value="${session.orderProjectVO.returnCount}">
													</td>
													<td style="color: #F60" th:text="${session.orderProjectVO.supportPrice}">￥ 1.00</td>
													<td th:if="${session.orderProjectVO.freight == 0}">免运费</td>
													<td th:if="${session.orderProjectVO.freight != 0}" th:text="${session.orderProjectVO.freight}">免运费</td>
												</tr>
											</tbody>
										</table>
										<div style="float: right;">
											<p>
												总价(含运费)：
												<span id="totalAmount" style="font-size: 16px; color: #F60;">￥[[${session.orderProjectVO.returnCount*session.orderProjectVO.supportPrice}]]</span>
											</p>
											<button id="submitBtn" type="button" class="btn btn-warning btn-lg" style="float: right;">
												<i class="glyphicon glyphicon-credit-card"></i>
												去结算
											</button>
										</div>
									</div>

									<div class="container">
										<div class="row clearfix">
											<div class="col-md-12 column">
												<blockquote>
													<p>
														<i class="glyphicon glyphicon-info-sign" style="color: #2a6496;"></i>
														提示
													</p>
													<br>
													<span style="font-size: 12px;">
														1.众筹并非商品交易，存在一定风险。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报。<br> 2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。<br> 3.本项目必须在2017-06-04之前达到 ￥1000000.00 的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。<br> 4.请在支持项目后15分钟内付款，否则您的支持请求会被自动关闭。<br> 5.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。<br> 6.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容。
													</span>
												</blockquote>
											</div>
										</div>
									</div>


								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="container" style="margin-top: 20px;">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<div id="footer">
						<div class="footerNav">
							<a rel="nofollow" href="http://www.atguigu.com">关于我们</a>
							|
							<a rel="nofollow" href="http://www.atguigu.com">服务条款</a>
							|
							<a rel="nofollow" href="http://www.atguigu.com">免责声明</a>
							|
							<a rel="nofollow" href="http://www.atguigu.com">网站地图</a>
							|
							<a rel="nofollow" href="http://www.atguigu.com">联系我们</a>
						</div>
						<div class="copyRight">Copyright ?2010-2014atguigu.com 版权所有</div>
					</div>

				</div>
			</div>
		</div>

	</div>
	<!-- /container -->
	<script src="jquery/jquery-2.1.1.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="script/docs.min.js"></script>
	<script src="script/back-to-top.js"></script>
	<script>
	
		var signalPurchase = [[${session.orderProjectVO.signalPurchase}]];
		var purchase = [[${session.orderProjectVO.purchase}]];
	
		$('#myTab a').click(function(e) {
			e.preventDefault()
			$(this).tab('show')
		});
		
		$("#returnCountInput").change(function(){
			var returnCount = $.trim($(this).val());
			
			if(returnCount == null || returnCount == "") {
				alert("请输入有效数据！");
				
				$(this).val(this.defaultValue);
				
				return ;
			}
			
			if(signalPurchase == 1 && returnCount > purchase) {
				alert("不能超过限购数量！");
				return ;
			}
			
			var supportPrice = [[${session.orderProjectVO.supportPrice}]];
			
			$("#totalAmount").text("￥"+(supportPrice * returnCount));
		});
		
		$("#submitBtn").click(function(){
			var returnCount = $("#returnCountInput").val();
			window.location.href = "order/confirm/order/"+returnCount;
		});
	</script>
</body>
</html>